<template>
    <layout title="分布式爬虫管理后台">
        <login ref="loginDialog" @success="loginSuccess"/>
        <div class="list">
            <template v-if="user">
                <el-tabs type="border-card" value="spiders">
                    <el-tab-pane label="爬虫服务器列表" name="spiders" lazy>
                        <vps-list/>
                    </el-tab-pane>
                    <el-tab-pane label="直播类型管理" name="typeManager">
                        <type-manager/>
                    </el-tab-pane>
                    <el-tab-pane label="直播平台标签" name="tags" lazy>
                        <tag-list/>
                    </el-tab-pane>
                    <el-tab-pane label="错误信息列表" name="errors" lazy>
                        <error-list/>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </div>
    </layout>
</template>

<script>
  import Vue from 'vue';
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  import Login from '../../components/login';
  import VpsList from '../../components/vpsList';
  import ErrorList from '../../components/errorList';
  import TagList from '../../components/tagList';
  import TypeManager from '../../components/typeManager';
  // import TagList from '../../components/tagList';

  Vue.use(ElementUI);

  export default {
    name: 'home',
    components: {TypeManager, TagList, ErrorList, VpsList, Login},
    data() {
      return {
        user: null,
      };
    },
    methods: {
      loginSuccess(user) {
        this.user = user;
      },
    },
    mounted() {
      document.title = '分布式爬虫管理后台';
    },
  };
</script>

<style lang="scss">
    body {
        background: lightslategrey;

        .list {
            max-width: 1024px;
            margin: 0 auto;

            .button-bar {
                padding: 15px 0;
            }
        }
    }
</style>